<script setup>
import {User,Lock} from '@element-plus/icons-vue'
import {reactive,ref} from 'vue'

import useUserStore from '@/store/user.js'
import { useRouter,useRoute } from 'vue-router'
import {ElNotification} from 'element-plus'
import {get_time} from '@/utils/time'

let useStore = useUserStore()
let loginForm = reactive({username:"admin",password:"123123"})
let $router = useRouter()  // 获取路由对象
let $route = useRoute()
let loading = ref(false)  // 控制登录按钮加载状态

// 自定义校验方法,默认会传入3个参数，rule校验规则，value表单的值，callback回调函数
const checkUsername= (rule,value,callback)=>{
    if(/^[a-zA-Z0-9][a-zA-Z0-9@_\-#%]{3,19}$/.test(value)){
        callback()
    }else{
        callback(new Error('用户名长度为4-20位,只能以字母或数字开头，只能包含@_-#%特殊字符'))
    }
}
const checkPassword=(rule,value,callback)=>{
    if(/^.{6,20}/.test(value)){
        callback()
    }else{
        callback(new Error('密码长度为6-20位'))
    }
}

// 校验规则
const rules = {
    // required表示该值为必填项，min最大长度，max最小长度
    // message错误提示信息，trigger什么时候触发验证，blur元素失去焦点时，change内容发生改变时
    username:[
        {trigger:'change',validator:checkUsername}
        
    ],
    password:[
        {trigger:'change',validator:checkPassword}
    ]
}


// 获取表单元素
let loginForms = ref()
// 登录功能
const login = async ()=>{
    // 校验用户输入的信息，等待校验通过后，后面的代码才会执行
    await loginForms.value.validate()
    // 通过仓库发送登录请求
    loading.value=true
    try{
        let result = await useStore.userLogin(loginForm)
        // 判断登录时，路径中是否有query参数，如果有则跳转到qurey参数指定的地址，如果没有则跳转到首页
        let redirect = $route.query.redirect
        $router.push({ path: redirect ||'/' })

        ElNotification({
            title:`Hi,${get_time()}好`,
            type:'success',
            message:'登录成功'
        })
    }catch(error){
        ElNotification({
            type:'error',
            message:error.message
        })
    }
    loading.value=false
}

</script>

<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_from" :model="loginForm" :rules="rules" ref="loginForms">
                    <!-- <h1>Hello</h1> -->
                    <h2>欢迎使用学籍管理系统</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login_btn" type="primary" size="default" @click="login" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped lang="scss">
.login_container{
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    /* background-size: 100% 100%;  拉伸图片*/
    background-size: cover;  /* 保持比例 */
    .login_from{
        position: relative;
        width: 70%;
        top:20vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size:cover;
        padding: 30px;
        border: 1px solid rgb(47, 33, 252);
        border-radius: 40px;
        h1{
            color: white;
            font-size: 40px;
        }
        h2{
            color: white;
            font-size: 20px;
            margin: 20px 0;
        }
        .login_btn{
            width: 100%;
        }
    }
}
</style>